<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>出库单详情</title>
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="//cdn.jsdelivr.net/jsbarcode/3.3.20/JsBarcode.all.min.js"></script>
    <script type="text/javascript">
        function myprint() {
            //直接调用浏览器打印功能
            bdhtml = window.document.body.innerHTML;
            //定义打印区域起始字符，根据这个截取网页局部内容
            sprnstr = "<!--startprint-->"; //打印区域开始的标记
            eprnstr = "<!--endprint-->";   //打印区域结束的标记
            prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
            prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
            window.document.body.innerHTML = prnhtml;
            //开始打印
            window.print();
            //还原网页内容
            window.document.body.innerHTML = bdhtml;
        }

        function barcodeGen() {
            var barvalue = $("#billNo").val();
            if (barvalue == "") {
                alert("请输入条形码字符串！！")
            } else {
                $("#bcode").JsBarcode(barvalue);
            }
        }

        $(function () {
            barcodeGen();

        })
    </script>

</head>
<body>

<div>
    <!--startprint-->

    <style type="text/css">
        .record-box {
            position: relative;
            width: 900px;
            height: 500px;
            padding: 0 5px;
            font-size: 13px;
            color: #787878;
        }

        .record-head {
            margin: -20px 0 80px 0;
            height: 40px;
            line-height: 40px;
            font-size: 13px;
        }

        .record-head span {
            float: left;
        }

        .record-head i {
            float: right;
            font: normal 28px/30px Tahoma;
            cursor: pointer;
        }

        .record-code {
            position: absolute;
            left: 50%;
            top: 10px;
            margin-left: -110px;
            width: 220px;
            font-size: 14px;
            text-align: center;
        }

        .record-code img {
            display: block;
        }

        .record-code span {
            line-height: 2;
        }

        .record-box h2 {
            font-weight: normal;
            font-size: 20px;
            margin-bottom: 20px;
        }

        .record-info {
            line-height: 40px;
            overflow: hidden;
        }

        .record-info span {
            float: left;
            width: 33.3%;
        }

        .record-info span:nth-child(1) {
            text-align: left;
        }

        .record-info span:nth-child(2) {
            text-align: center;
        }

        .record-info span:nth-child(3) {
            text-align: right;
        }

        .record-table {
            /*max-height: 250px;*/
            overflow-y: auto;
        }

        .record-table table {
            width: 100%;
        }

        .record-table th, .record-table td {
            padding: 10px 0;
            font-size: 13px;
            text-align: center;
            border: 1px solid #787878;
        }

        .record-table th {
            padding: 5px 0;
            font-weight: normal;
        }

        .record-foot {
            margin: 10px 0;
            line-height: 40px;
            overflow: hidden;
        }

        .record-foot span {
            float: left;
            width: 20%;
            text-align: center;
        }

        .record-foot span:nth-child(1) {
            text-align: left;
        }

        .record-foot span:nth-child(3) {
            width: 25%;
        }

        .record-foot span:nth-child(5) {
            width: 15%;
            text-align: right;
        }

        .record-button {
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 10px;
            text-align: center;
        }

        .record-button a {
            border: 1px solid #787878;
            padding: 10px 15px;
            font-size: 14px;
            color: #787878;
        }
    </style>

    <div class="record-box">
        <div class="record-head"><span></span><b></b></div>
        <div class="record-code">
            <input type="hidden" id="billNo" th:value="${detail.stockOutNo}"/>
            <img id="bcode" src=""/>
            <!--            <span id="r-code">CG190411100335401</span>-->
        </div>
        <h2>出库单</h2>
        <div class="record-info">
            <span>单据编号：<i id="r-number" th:text="${detail.stockOutNo}">CG190411100335401</i></span>
            <span>单据编号：<i id="r-number" th:text="${detail.stockOutNo}">CG190411100335401</i></span>
            <span>出库时间：<i id="r-shop" th:if="${detail.completeTime!=null}" th:text="${#dates.format(detail.completeTime*1000,'yyyy-MM-dd HH:mm:ss')}">华衣</i></span>
            <span>出库人：<i id="r-shop2" th:text="${detail.createBy}">华衣</i></span>
        </div>
        <div class="record-table">
            <table>
                <thead>
                <tr>
                    <th>序号</th>
                    <th>出库明细ID</th>
                    <th>SKU</th>
                    <th>规格</th>
                    <th>出库数量</th>
                    <th>出库仓位</th>
                    <th>出库批次</th>
                    <th>出库时间</th>
                </tr>
                </thead>
                <tbody id="r-table">
                <tr th:each="item:${detail.items}">
                    <td th:text="${itemStat.index + 1}">1</td>
                    <td th:text="${item.id}">1</td>
                    <td th:text="${item.specNum}">HY19M001Q012L0001</td>

                    <td >
                        颜色：<span th:text="${item.colorValue}"></span>
                        尺码：<span th:text="${item.sizeValue}"></span>
                    </td>
                    <td th:text="${item.quantity}"></td>
                    <td th:text="${item.getLocationName()}"></td>
                    <td th:text="${item.getStockOutFormItemId()}"></td>
                    <td>
                        <p th:text="${#dates.format(item.completeTime*1000, 'yyyy-MM-dd HH:mm:ss')}" th:if="${item.completeTime > 0}"></p>
                    </td>
                </tr>

                </tbody>
            </table>
        </div>

    </div>
    <!--endprint-->
    <div>
        <div class="record-button"><a href="javascript:;" onClick="myprint();">打印</a></div>
    </div>
</div>
</body>
</html>